import React, {Component} from 'react'
import {connect} from 'react-redux'
import { Picker, List, Button,InputItem ,Toast} from 'antd-mobile'

import {bindBank,getBankList} from "../redux/actions/userAction"
import MyHeader from "../components/myheader"
export class addBankCard extends Component {
  constructor (props){
   super(props)
   this.state= {
    bank: "",
    accountNumber: "", 
    bankAddress: "",
    withdrawpwd: "",
    sValue:""
   }
   this.registerProcess = false;
}
addbankcard(){
    const { bank,
    accountNumber, 
    bankAddress,
    withdrawpwd} = this.state
    let accountName = this.props.user.get('auth').get("userName")
    console.log(bank.toString());

    if(bank == ""){
      return Toast.info('请选择收款银行');
    }
    if(accountNumber.replace(/\s/g, '') == ""){
      return Toast.info('请输入正确的银行卡号')
    }
    if(bankAddress == "" ){
     return Toast.info('请输入开户行地址')
    }
    if(!withdrawpwd.match(/\d{4}/g)){
      return Toast.info('请输入4位纯数字提款密码')
    }
    if(this.registerProcess){ return }
    this.registerProcess = true;
    let _this = this;
   Toast.loading("提交中",0)
   const {dispatch,history} = this.props;
   dispatch(bindBank(bank.toString(),
    accountNumber.replace(/\s/g, ''), 
    accountName, 
    bankAddress,
    withdrawpwd,(ok,data)=>{
    _this.registerProcess = false;
    Toast.hide()
    if (ok) {
      Toast.info('绑定成功');
      history.push('/my');
    } else {
      Toast.info(data);
    }
  }))
}
componentWillMount(){
  const {dispatch} = this.props;
  
  dispatch(getBankList())
}
// componentDidMount(){
  
// }
// componentWillUpdate(nextprops,nextstate){
//   let list = [];
//   list.push(nextprops.user.get('bankLists'))
// }
   render() {
    if(this.props.user.get('bankLists').length === 0 ){
      return false
    } 
    let list = [];
    this.props.user.get('bankLists').forEach(element => {
      list.push({label:element.bankCnName,value:element.bankCode})
    });
    // console.log(list); 
    const lists = [list]
    // console.log(lists);
   return <div className="changepw">
        <MyHeader {...this.props}>绑定银行卡</MyHeader>

        <div className="basepage">
          <div className="changepw-container">

          <Picker
          data={lists}
          title="选择银行卡号"
          cascade={false}
          cols={1}
          extra="请选择(可选)"
          value={this.state.bank}
          // onChange={v => this.setState({bank: v})}
          onOk={v =>this.setState({bank: v})}
        >
          <List.Item arrow="horizontal">收款银行：</List.Item>
        </Picker>

      <InputItem type="bankCard"
                placeholder="请填写银行卡号"
                onChange={(accountNumber)=>{this.setState({accountNumber})}}
                value={this.state.accountNumber}
            >银行卡：</InputItem>

      <InputItem type="text"
                disabled
                value={this.props.user.get('info').userRealName}
            >开户姓名：</InputItem>

      <InputItem type="text"
                placeholder="请填写开户地址"
                onChange={(bankAddress)=>{this.setState({bankAddress})}}
                value={this.state.bankAddress}
            >开户行地址：</InputItem>

      <InputItem type="password"
                placeholder="四位提款密码"
                onChange={(withdrawpwd)=>{withdrawpwd.length<=4 ? this.setState({withdrawpwd}) : ""}}
                value={this.state.withdrawpwd}
            >提款密码：</InputItem>


            </div>
            <Button type="primary" onClick={()=>{this.addbankcard()}}>确定</Button>
      </div>

   </div>
   }
}
function mapStateToProps(state) {
  return {
    user: state.user // gives our component access to state through props.My
  }
}

export default connect(mapStateToProps)(addBankCard)